<template>
	<view class="page">
		<view v-if="pets.length > 0" class="doctor-list" style="padding-bottom: 0;">
			<view class="doctor-item">
				<view class="doctor-info">
					<image class="doctor-avatar" :src="selectDoctor.avatar | avatar" mode=""></image>
					<view class="doctor-pos">
						<view class="doctor-name">
							<text>{{selectDoctor.fullName}}</text>
							<text class="desc">({{selectDoctor.postTitle}})</text>
						</view>
						<view class="doctor-desc">{{selectDoctor.briefIntroduction}}</view>
					</view>
				</view>
				<view class="doctor-op" >
					<view class="doctor-date">就诊日期：{{selectDate}}({{selectWeek}})</view>
				</view>
			</view>
		</view>
		
		<view v-if="pets.length > 0" class="form-wrap">
		<view class="form-group form-group__picker">
			<view class="form-group__title require">挂号爱宠</view>
			<view class="form-group__con" >
				<picker class="form-group__from" mode="selector" :range="pets" range-key="nickName" @change="pickerChange">
					<view class="sub-div">
						<view v-if="!selectPet.petId" class="picker-res placeholder-class">{{pickerRes}}</view>
						<view v-else class="picker-res">{{selectPet.petNickName}}</view>
						<u-icon name='arrow-right' size='20' color='#b2b2b2'></u-icon>
					</view>
				</picker>
			</view>
		</view>
		<!-- <view class="form-group form-group__checkbox">
			<view class="form-group__title require">挂号类型</view>
			<view class="form-group__con ">
				<view :class="formDate.bookingType === item.id?'op op-active':'op'" v-for="(item, index) in serviceType" @click="muSelect(item.id)">{{item.name}}</view>
				<view class="op op-active" @click="muSelect()">免疫预约</view>
				<view class="op">住院预约</view>
				<view class="op">内外科预约</view>
			</view>
		</view> -->
		<view class="form-group form-group__checkbox o">
			<view class="form-group__title require">挂号时间段</view>
			<view class="form-group__con" v-if="appointmentTimeList.length > 0" style="justify-content: flex-start;">
				<view style="margin-right: 20upx;" :class="selectTime.id === item.id?'op op-active':'op'" @click="muSelect(item)" v-for="item in appointmentTimeList" :key='item.id'>
					<text>{{item.startTime}}~{{item.endTime}}</text>
					<text class="limit">余号: {{item.remainderNum}}</text>
				</view>
			</view>
			<view class="no-info" style="line-height: 50upx;" v-else>该医生今天的挂号名额已满，请选择其他的日期或是医生挂号，对您造成的不便，非常抱歉~</view>
		</view>
		</view>
		<block v-if="pets.length > 0">
			<view class="page-submit" v-if="appointmentTimeList.length > 0" @click="formSubmit">确认挂号</view>
		</block>
		<view class="footer-block"></view>
		<view v-if="pets.length <= 0" class="empty">
			<u-empty mode='list' text='您还没有添加宠物,请先添加宠物~'></u-empty>
		</view>
		
		<view v-if="pets.length <= 0" class="circular-submit" @click="$link('/pagesMine/petsAdd')">去添加</view>
			
		
	</view>
</template>

<script>
	import common from '../../utils/common.js'
	import api from '../../utils/api.js'
	export default {
		data() {
			return{
				pickerRes: '点击选择',
				doctorId: '',
				selectDate: '',
				selectWeek: '',
				selectDoctor: {},
				selectTime: {}, // 选择的挂号时段
				pets: [],
				selectPet: {
					petId: '',
					petNickName: ''
				},
				
				appointmentTimeList: []
			}
		},
		
		onLoad(options) {
			this.doctorId = options.doctorId
			this.selectDate = options.selectDate
			this.selectWeek = options.selectWeek
			
			this.getDoctorTime()
		    this.getPetList()
		},
		
		methods: {
			getDoctorTime() {
				api.getAppointmentByDoctor({ id: this.doctorId, appointmentDate: this.selectDate }, res => {
					console.log(res);
					this.selectDoctor = res
					this.selectPet.petId = res.petId || ''
					this.selectPet.petNickName = res.petNickName || ''
					// 挂号时间段
					let appointmentTimeList = res.appointmentList || []
					let temp = []
					appointmentTimeList.map(item => {
						let startTime = new Date(item.startTime)
						let endTime = new Date(item.endTime)
						temp.push({
							startTime: (startTime.getHours()).toString().padStart(2, '0') + ':' + (startTime.getMinutes()).toString().padStart(2, '0'),
							endTime: (endTime.getHours()).toString().padStart(2, '0') + ':' + (endTime.getMinutes()).toString().padStart(2, '0'),
							remainderNum: item.remainderNum,
							id: item.id
  						})
					})
					console.log(temp);
					this.appointmentTimeList = temp
				})
			},
			
			getPetList() {
				api.getPetList({ },(res) => {
					 this.pets = res
				}) 
			},
			
			// 选择挂号宠物
			pickerChange(e) {
				let index = e.detail.value
				this.selectPet = {
					petId: this.pets[index]['id'],
					petNickName: this.pets[index]['nickName']
				}
			},
			
			// 选择时间段
			muSelect(item) {
				this.selectTime = item
			},
			
			formSubmit() {
				let formData = {
					makeDate: this.selectDate,
					appointmentTimeId: this.selectTime.id,
					petId: this.selectPet.petId
				}
				if(!formData.makeDate) { this.$showToast('挂号日期不存在,请返回重试~'); return }
				if(!formData.appointmentTimeId) { this.$showToast('请选择挂号时段~'); return }
				if(!formData.petId) { this.$showToast('请选择挂号宠物~'); return }
				api.saveOnlineAppointment(formData, res => {
					this.$link('/pagesMain/register/success?id='+res)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import './doctorList.scss';
	.no-info{
		font-size: $font-size-26;
		color: $red;
		margin-top: 20upx;
		font-weight: bold;
		text-align: left;
	}
	.doctor-date{
		width: 100%;
		text-align: center;
		color: $theme-color;
	}
	.o .op{
		flex-wrap: wrap;
		height: auto;
		padding: 20upx 0;
		border-radius: 10upx;
		width: 215upx;
	}
	.o .op {
		margin-right: 0;
	}
	.limit{
		width: 100%;
		text-align: center;
		font-size: $font-size-24;
	}
	.doctor-list{
		margin-top: 0;
		padding: 0 20upx;
		box-sizing: border-box;
	}
	.doctor-item{
		border: none;
		border-bottom: 1px solid $border-color;
		padding: 0;
		padding-bottom: 30upx;
	}
</style>
